import { useNavigate } from 'react-router-dom'
import { Dropdown, Avatar, Space, message } from 'antd';
import type { MenuProps } from 'antd';
import avatar from '../../assets/avatar.jpeg'
// import {
//   MenuFoldOutlined
// } from '@ant-design/icons';

function Nav() {
  
  const navigate = useNavigate()
  
  const items: MenuProps['items'] = [
    {
      label: '退出',
      key: '0',
    },
  ];
  
  const onClick: MenuProps['onClick'] = ({ key }) => {
    if (key === '0') { // 点击退出
      localStorage.clear()
      navigate('/login')
      message.success('退出成功')
    }
  }
  return (
    <nav className="h-12 px-2  flex justify-between items-center shadow bg-white">
      <section>
        {/* <MenuFoldOutlined /> */}
        I KUN
      </section>
      <section>
        <Dropdown menu={{ items, onClick }}>
          <a onClick={(e) => e.preventDefault()}>
            <Avatar src={avatar} />
            <Space>
              admin
            </Space>
          </a>
        </Dropdown>
      </section>
    </nav>
  )
}

export default Nav